<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/28
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流程审核</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.js" charset="utf-8"></script>
<script src="/js/common.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
    <h1 style="margin-bottom: 20px;">流程审核</h1>
    <input id="editOption" value="${editOption}" style="display: none">

    <!-- 功能区+表格 -->
    <div style="background-color: white;">
        <div class="layui-row">
            <!-- 刷新按钮 -->
            <div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
                <button type="button" class="layui-btn" style="font-size: 1rem;" onclick="location.href = '/jsp/processManage/auditProcess.jsp'">
                    <i class="layui-icon layui-icon-refresh-3">刷新</i>
                </button>
            </div>
            <!-- 搜索框 -->
            <div class="layui-form-item layui-col-xs11" style="clear: none !important;margin-bottom: 0 !important;padding-top: 10px;padding-right: 10px;">
                <div style="width: 208px;height: 35px;border: 1px solid #E6E6E6;float: right;padding-left: 5px;">
                    <input id="queryCondition" placeholder="查找..." style="height: inherit;border: 0;"/>
                    <button type="button" class="layui-btn layui-btn-sm layui-bg-cyan" style="position: absolute;height: 35px" onclick="queryMyProcess()">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
                <div class="layui-inline" style="float: right">
                    <label class="layui-form-label">查询：</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input id="beginDate" placeholder="起始日期" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input id="endDate" placeholder="结束日期" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <table class="layui-hide" id="tb_process" lay-filter="filter_process"></table>
        <!-- 表格工具列 -->
        <script type="text/html" id="bar_processEdit">
            <a class="audit layui-btn layui-btn-xs" lay-event="set">
                <i class="layui-icon layui-icon-form">审核</i>
            </a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="check">
                <i class="layui-icon layui-icon-search">查看</i>
            </a>
        </script>
        <!-- 紧急程度框 -->
        <script type="text/html" id="bar_process_status">
            <a class="layui-btn layui-btn-xs"></a>
        </script>
        <!-- 状态框 -->
        <script type="text/html" id="bar_audit_status">
            <a class="layui-btn layui-btn-xs"></a>
        </script>
    </div>
</body>
<script>
    $(function () {
        //页面加载完成判断是否是从编辑页面跳转过来的
        isShowSuccessPanel();
    });
    // 表格模块
    layui.use(['table','laydate'], function(){
        var table = layui.table;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#beginDate' //指定元素
        });
        laydate.render({
            elem: '#endDate' //指定元素
        });

        table.render({
            elem:'#tb_process',
            url:'/auditProcess/getMyAuditProcessListByPage.do',
            where:{
                queryCondition:$("#queryCondition").val(),
                beginDate:$("#beginDate").val(),
                endDate:$("#endDate").val()
            },
            title: '我的申请流程表',
            cols: [[
                {field:'process_id', title:'ID', hide: true},
                {field:'process_type', title:'类型'},
                {field:'process_title', title:'标题'},
                {field:'apply_user_name', title:'申请人'},
                {field:'apply_time', title:'申请时间'},
                {title:'紧急程度',toolbar: '#bar_process_status',width:'10%'},
                {field:'process_status_name', title:'紧急程度name', hide: true},
                {field:'process_theme_skin', title:'紧急程度颜色', hide: true},
                {title:'状态',toolbar: '#bar_audit_status',width:'10%'},
                {field:'audit_status_name', title:'状态name', hide: true},
                {field:'audit_theme_skin', title:'状态颜色', hide: true},
                {field:'isAudit', title:'是否审核过', hide: true},
                {field:'progress_level', title:'审核进度', hide: true},
                {fixed: 'right', title:'操作', toolbar: '#bar_processEdit'}
            ]],
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip','refresh'], //自定义分页布局
                groups: 5, //只显示 1 个连续页码
                first: false, //不显示首页
                last: false //不显示尾页
            },
            done: function(res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                var data = res.data;//表格数据数组
                //设置每一行的紧急程度框
                setStatusColumn("tb_process",data,5,"process");
                //设置每一行的状态框
                setStatusColumn("tb_process",data,8,"audit");
                //将审核过的流程的审核按钮失能
                var trList = $("#tb_process").next().find(".layui-table-body").find("tr");//表格所有行
                var len = data.length;
                if (len > 0){
                    //遍历表格数据，设置状态名称和颜色
                    for (i = 0; i < len; i++){
                        if (data[i].isAudit == 1){
                            var $curr_btn_audit = $(trList[i].childNodes[13]).find(".audit");//当前行的审核按钮的jQuery对象
                            $curr_btn_audit.addClass("layui-btn-disabled");
                        }
                    }
                }
            }
        });

        //监听行工具事件
        table.on('tool(filter_process)', function(obj){

            var data = obj.data;
            var event = obj.event;
            if(event == 'check'){
                var type = obj.data.process_type;//流程类型：burse、evection、overtime、regular、holiday、resign

                if(type == 'burse'){

                    location.href = '/myProcess/toShowBursePage.do?process_id='+data.process_id;
                }else if (type == 'evection') {

                    location.href = '/myProcess/toShowEvectionPage.do?process_id='+data.process_id;
                }else if (type == 'overtime') {

                    location.href = '/myProcess/toShowOvertimePage.do?process_id='+data.process_id;
                }else if (type == 'regular') {

                    location.href = '/myProcess/toShowRegularPage.do?process_id='+data.process_id;
                }else if (type == 'holiday') {

                    location.href = '/myProcess/toShowHolidayPage.do?process_id='+data.process_id;
                }else if (type == 'resign') {

                    location.href = '/myProcess/toShowResignPage.do?process_id='+data.process_id;
                }
            }else if (event == 'set'){
                if(data.isAudit == 0){
                    var cur_auditType = 0;//当前审核类型：0-部门经理审核，1-人事经理审核，2-财务经理审核
                    var next_auditType = 1;//下一步审核类型：0-流程结束，1-人事经理审核，2-财务经理审核
                    if (data.progress_level == 1){
                        //一审：默认当前由部门经理审核，下一步由人事经理审核

                        if (data.process_type == 'burse') {
                            //费用的下一步审核人是财务经理
                            next_auditType = 2;
                        }
                    }else if (data.progress_level == 2){
                        //二审：默认当前由人事经理审核，然后流程结束
                        cur_auditType = 1;
                        next_auditType = 0;

                        if (data.process_type == 'burse') {
                            //费用的当前审核人是财务经理
                            cur_auditType = 2;
                        }
                        if (data.process_type == 'resign') {
                            //离职的下一步审核人是财务经理
                            next_auditType = 2;
                        }
                    } else {
                        //三审：一定是离职流程
                        cur_auditType = 2;
                        next_auditType = 0;
                    }
                    location.href = '/jsp/processManage/audit.jsp?cur_auditType='+cur_auditType+'&next_auditType='+next_auditType+'&process_type='+data.process_type+'&progress_level='+data.progress_level+'&process_id='+data.process_id+'&process_title='+data.process_title;
                }else {
                    layer.msg("该流程已审核");
                }
            }
        });
    });

    function queryMyProcess() {
        //重载表格
        layui.table.reload('tb_process', {
            url:'/auditProcess/getMyAuditProcessListByPage.do',
            where:{
                queryCondition:$("#queryCondition").val(),
                beginDate:$("#beginDate").val(),
                endDate:$("#endDate").val()
            }
        });
    }

    /**
     * 为layui的数据表格设置状态列
     * @param tableId layui的表格id
     * @param data layui的表格数据
     * @param index 状态框所在列索引
     * @param pre 状态框的列名前缀
     */
    function setStatusColumn(tableId,data,index,pre) {

        var trList = $("#"+tableId).next().find(".layui-table-body").find("tr");//表格所有行
        var len = data.length;
        if (len > 0){
            //遍历表格数据，设置状态名称和颜色
            for (i = 0; i < len; i++){

                var $curr_status = $(trList[i].childNodes[index]).find("a");//当前行的状态的jQuery对象
                $curr_status.html(data[i][pre+'_status_name']);
                $curr_status.addClass(data[i][pre+'_theme_skin']);
            }
        }
    }
</script>
</html>
